<template>
  <view class="container">
    <!-- <view class="header">
      <text class="app-title">AI He</text>
      <view class="header-actions">
        <view class="action-item">
          <text class="iconfont icon-history">⏱</text>
        </view>
        <view class="action-item">
          <text class="iconfont icon-user">👤</text>
        </view>
      </view>
    </view> -->

    <!-- 侧边任务列表抽屉 -->
    <view class="task-drawer" :class="{ 'drawer-open': isDrawerOpen }">
      <view class="drawer-header">
        <text class="drawer-title">任务列表</text>
        <view class="drawer-close" @click="closeDrawer">×</view>
      </view>

      <scroll-view
        scroll-y
        class="drawer-content"
        v-if="taskHistory.length > 0"
      >
        <view
          class="task-item"
          v-for="(task, index) in taskHistory"
          :key="task.id"
          :class="{
            'task-active': task.id === currentTaskId,
            'task-completed': task.status === 'SUCCESS',
            'task-failed': task.status === 'FAILED',
          }"
        >
          <view class="task-info">
            <view class="task-header">
              <text class="task-title"
                >任务 #{{ taskHistory.length - index }}</text
              >
              <text class="task-status">{{ getStatusText(task.status) }}</text>
            </view>

            <view class="task-details">
              <text class="task-time">{{ task.startTime }}</text>
             <!-- <text class="task-duration" v-if="task.duration">{{
                task.duration
              }}</text> -->
              <text class="task-duration" v-if="(task.status === 'PENDING' || task.status === 'PROCESSING') && task.id === currentTaskId">{{ formatTaskDuration(task) }}</text>
            </view>
          </view>

          <!-- 任务结果图片预览 -->
          <view
            class="task-result-preview"
            v-if="task.resultImage && task.status === 'SUCCESS'"
            @click="viewTaskResult(task)"
          >
            <image
              :src="task.resultImage"
              mode="aspectFit"
              class="task-result-image"
            ></image>
          </view>

          <view class="task-actions" v-if="task.status === 'SUCCESS'">
            <view class="task-action-btn" @click="viewTaskResult(task)">
              <text class="task-action-text">查看</text>
            </view>
            <view
              class="task-action-btn"
              @click="downloadImage(task.resultImage)"
            >
              <text class="task-action-text">下载</text>
            </view>
          </view>

          <view
            class="task-progress"
            v-if="task.status === 'PENDING' || task.status === 'PROCESSING'"
          >
            <view class="progress-bar">
              <view
                class="progress-inner"
                :style="{
                  width: task.id === currentTaskId ? progressWidth : '20%',
                }"
              ></view>
            </view>
          </view>
        </view>

        <view class="drawer-actions">
          <view class="drawer-action-btn" @click="clearTaskHistory">
            <text class="drawer-action-text">清空历史</text>
          </view>
        </view>
      </scroll-view>

      <!-- 任务列表为空时显示提示 -->
      <view
        class="empty-task-container drawer-empty"
        v-if="taskHistory.length === 0"
      >
        <view class="empty-task-icon">📋</view>
        <text class="empty-task-text">暂无任务记录</text>
        <text class="empty-task-tip">上传图片并运行任务后，会在这里显示</text>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="drawer-mask" v-if="isDrawerOpen" @click="closeDrawer"></view>

    <view class="content-container">
      <view class="main-title-container">
        <text class="main-title">换装大师</text>
        <text class="subtitle">打造专业换装摄影</text>
        <view class="tags-container">
          <view class="tag"><text class="tag-icon">📷</text> 物品摄影</view>
          <view class="tag"><text class="tag-icon">👣</text> 模特产品展示</view>
        </view>

        <!-- 任务列表按钮 -->
        <view class="task-list-button" @click="openDrawer">
          <view class="task-list-icon">
            <view class="task-list-line"></view>
            <view class="task-list-line"></view>
            <view class="task-list-line"></view>
          </view>
          <text class="task-list-text">任务列表</text>
          <text class="task-list-badge" v-if="taskHistory.length > 0">{{
            taskHistory.length
          }}</text>
        </view>
      </view>

      <!-- 上传区域 -->
      <view class="upload-panel">
        <view class="upload-column">
          <view class="upload-row">
            <view class="upload-card">
              <view class="card-label">上传产品图</view>
              <view
                class="upload-area"
                @click="chooseImage('shoe')"
                :class="{ 'has-image': shoeImage }"
              >
                <template v-if="shoeImage">
                  <image
                    :src="shoeImage"
                    mode="aspectFill"
                    class="preview-image"
                  ></image>
                  <view class="image-overlay">
                    <view class="edit-button">编辑</view>
                  </view>
                  <view class="delete-button" @click.stop="deleteImage('shoe')">
                    <text class="delete-icon">×</text>
                  </view>
                </template>
                <template v-else>
                  <view class="upload-icon">
                    <text class="icon-plus">+</text>
                  </view>
                  <text class="upload-text">添加产品图片</text>
                  <text class="upload-desc">透明背景最佳</text>
                </template>
              </view>
            </view>
            <view class="upload-card">
              <view class="card-label">上传参考图</view>
              <view
                class="upload-area"
                @click="chooseImage('pose')"
                :class="{ 'has-image': poseImage }"
              >
                <template v-if="poseImage">
                  <image
                    :src="poseImage"
                    mode="aspectFill"
                    class="preview-image"
                  ></image>
                  <view class="image-overlay">
                    <view class="edit-button">编辑</view>
                  </view>
                  <view class="delete-button" @click.stop="deleteImage('pose')">
                    <text class="delete-icon">×</text>
                  </view>
                </template>
                <template v-else>
                  <view class="upload-icon">
                    <text class="icon-plus">+</text>
                  </view>
                  <text class="upload-text">上传参考图</text>
                  <text class="upload-desc">参考图</text>
                </template>
              </view>
            </view>
          </view>
        </view>

        <view class="tips-container">
          <!-- 配饰选择区域 -->
          <accessory-selector
            :model-value="selectedAccessory"
            @update:model-value="selectedAccessory = $event"
            @input="selectedAccessory = $event"
          ></accessory-selector>

          <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text"
              >您可以选择添加鞋子、帽子或眼镜等配饰，将自动应用到生成的图像中。系统将根据您的选择自动应用合适的配饰效果。</text
            >
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-bar">
      <view class="action-group">
        <view class="action-circle">
          <text class="action-icon">⋮</text>
        </view>
        <view class="action-circle">
          <text class="action-icon">♡</text>
        </view>
      </view>
      <button
        class="run-button"
        :class="{ 'button-active': poseImage || shoeImage }"
        :disabled="!poseImage && !shoeImage"
        @click="handleRun"
      >
        运行
      </button>
    </view>

    <!-- 全屏图片预览 -->
    <view
      class="fullscreen-preview"
      v-if="previewVisible"
      @click="closePreview"
    >
      <image
        :src="previewImageUrl"
        mode="aspectFit"
        class="fullscreen-image"
      ></image>
      <view class="preview-close">×</view>
    </view>
  </view>
</template>

<script>
import runningHubService from "../../utils/runningHubService.js";
import AccessorySelector from "../../components/AccessorySelector.vue";

export default {
  components: {
    AccessorySelector,
  },
  data() {
    return {
      poseImage: "", // 姿势图的路径
      shoeImage: "", // 鞋子图的路径
      showAdvanced: false, // 是否显示高级参数
      selectedBackground: 0, // 选中的背景
      selectedStyle: 0, // 选中的样式
      selectedAccessory: "glasses", // 选中的配饰类型: 'glasses', 'hat', 'shoe' 等
      apiKey: "", // RunningHub API KEY
      workflowId: "1906713816875380738", // 指定的工作流ID
      taskId: "", // 当前任务ID
      statusTimer: null, // 状态查询定时器
      poseBatchPoints: {}, // 姿势图的位置信息
      shoeBatchPoints: {}, // 鞋子图的位置信息
      backgrounds: [
        { name: "纯白", color: "#FFFFFF" },
        { name: "渐变", color: "#F5F5F5" },
        { name: "工作室", color: "#EEEEEE" },
        { name: "户外", color: "#E0E0E0" },
      ],
      styles: [
        { name: "正面", icon: "◼" },
        { name: "侧面", icon: "▣" },
        { name: "底部", icon: "▤" },
        { name: "特写", icon: "▥" },
      ],
      workflow: "",
      taskHistory: [], // 任务历史记录
      currentTaskId: null, // 当前正在进行的任务ID
      progressWidth: "20%", // 进度条宽度
      isDrawerOpen: false, // 侧边抽屉是否打开
      previewVisible: false, // 是否显示全屏预览
      previewImageUrl: "", // 全屏预览的图片URL
    };
  },
  onLoad() {
    // 从服务实例获取默认API KEY
    this.apiKey = runningHubService.getApiKey();
    console.log("使用配置文件中的API KEY:", this.maskApiKey(this.apiKey));

    // 初始化需要获取工作流信息以找到正确的节点ID
    this.initWorkflowInfo();

    // 从本地存储加载任务历史
    this.loadTaskHistory();
  },
  methods: {
    accessoryUpdate(value) {
      console.log("AccessorySelector 选择了:", value);
      this.selectedAccessory = value;
    },
    // 初始化工作流信息
    async initWorkflowInfo() {
      if (!this.apiKey) {
        console.error("API KEY 未设置，无法获取工作流信息");
        return;
      }

      try {
        // 获取工作流信息
        const workflowInfo = await runningHubService.getWorkflowJson(
          this.workflowId
        );
        console.log("获取到工作流信息:", workflowInfo);

        if (!workflowInfo || !workflowInfo.data || !workflowInfo.data.prompt) {
          console.error("工作流数据格式不正确或为空");
          return;
        }

        try {
          this.workflow = JSON.parse(workflowInfo.data.prompt);
        } catch (parseError) {
          console.error("工作流JSON解析失败:", parseError);
          return;
        }

        // 检查是否有177节点，并确保它有inputs属性
        if (!this.workflow[177]) {
          console.error("工作流中没有找到节点177，无法设置配饰参数");
          // 创建一个默认的节点177
          this.workflow[177] = {
            inputs: {
              model: "segformer_b3_fashion",
            },
          };
        } else if (!this.workflow[177].inputs) {
          console.error("节点177没有inputs属性，将创建一个");
          this.workflow[177].inputs = {
            model: "segformer_b3_fashion",
          };
        }

        // 输出当前节点177的inputs属性
        console.log(
          "节点177的输入参数:",
          JSON.stringify(this.workflow[177].inputs)
        );

        // 确保model参数正确设置
        this.workflow[177].inputs.model = "segformer_b3_fashion";

        // 设置姿势图和服装图节点
        this.poseBatchPoints = {
          nodeId: "59", // 姿势图节点ID
          fieldName: "image",
        };

        this.shoeBatchPoints = {
          nodeId: "50", // 服装图节点ID
          fieldName: "image",
        };

        console.log("工作流初始化完成，配置节点:", {
          poseBatchPoints: this.poseBatchPoints,
          shoeBatchPoints: this.shoeBatchPoints,
          accessoryNode: this.workflow[177],
        });
      } catch (error) {
        console.error("初始化工作流信息失败:", error);
      }
    },

    // 从本地存储加载任务历史
    loadTaskHistory() {
      try {
        const history = uni.getStorageSync("taskHistory");
        if (history) {
          this.taskHistory = JSON.parse(history);

          // 检查是否有正在进行的任务
          const pendingTask = this.taskHistory.find(
            (task) => task.status === "PENDING" || task.status === "PROCESSING"
          );

          if (pendingTask) {
            this.currentTaskId = pendingTask.id;
            this.taskId = pendingTask.id;
            this.startStatusCheck();
          }
        }
      } catch (error) {
        console.error("加载任务历史失败:", error);
        this.taskHistory = [];
      }
    },

    // 保存任务历史到本地存储
    saveTaskHistory() {
      try {
        uni.setStorageSync("taskHistory", JSON.stringify(this.taskHistory));
      } catch (error) {
        console.error("保存任务历史失败:", error);
      }
    },

    // 添加新任务到历史记录
    addTaskToHistory(taskId) {
      const now = new Date();
      const task = {
        id: taskId,
        status: "PENDING",
        startTime: this.formatStartTime(now),
        timestamp: now.getTime(),
        duration: "00:00:00",
        elapsedTime: 0,
        resultImage: null,
      };

      // 添加到历史记录开头
      this.taskHistory.unshift(task);

      // 限制历史记录最多保存10条
      if (this.taskHistory.length > 10) {
        this.taskHistory = this.taskHistory.slice(0, 10);
      }

      // 设置定时器，每秒更新任务持续时间
      const taskIndex = 0; // 新任务总是在索引0
      this.taskHistory[taskIndex].durationTimer = setInterval(() => {
        const now = new Date().getTime();
        const startTime = this.taskHistory[taskIndex].timestamp;
        const elapsedTime = now - startTime;
        this.taskHistory[taskIndex].elapsedTime = elapsedTime;
        
        // 计算时分秒
        const totalSeconds = Math.floor(elapsedTime / 1000);
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;
        
        // 格式化为 HH:MM:SS 格式
        const formattedHours = hours.toString().padStart(2, '0');
        const formattedMinutes = minutes.toString().padStart(2, '0');
        const formattedSeconds = seconds.toString().padStart(2, '0');
        
        this.taskHistory[taskIndex].duration = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        this.$forceUpdate(); // 强制更新视图
      }, 1000);

      this.currentTaskId = taskId;
      this.saveTaskHistory();
    },

    // 更新任务状态
    updateTaskStatus(taskId, status) {
      const taskIndex = this.taskHistory.findIndex(
        (task) => task.id === taskId
      );
      if (taskIndex !== -1) {
        this.taskHistory[taskIndex].status = status;

        // 如果任务完成或失败，保留当前的时间格式
        if (status === "SUCCESS" || status === "FAILED") {
          // 已有计时器获取的时间，保持不变
          // 只是为了确保最终时间被保存，可以清除计时器了
          if (this.taskHistory[taskIndex].durationTimer) {
            clearInterval(this.taskHistory[taskIndex].durationTimer);
            this.taskHistory[taskIndex].durationTimer = null;
          }
        }

        this.saveTaskHistory();
      }
    },

    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          if (type === "pose") {
            this.poseImage = tempFilePath;
          } else if (type === "shoe") {
            this.shoeImage = tempFilePath;
          }
          // 添加振动反馈
          if (uni.vibrateShort) {
            uni.vibrateShort();
          }
        },
      });
    },

    // 删除图片
    deleteImage(type) {
      uni.showModal({
        title: "确认删除",
        content: "确定要删除这张图片吗？",
        confirmColor: "#FF3B30",
        success: (res) => {
          if (res.confirm) {
            if (type === "pose") {
              this.poseImage = "";
            } else if (type === "shoe") {
              this.shoeImage = "";
            }
            // 添加振动反馈
            if (uni.vibrateShort) {
              uni.vibrateShort();
            }
          }
        },
      });
    },

    // 点击运行
    handleRun() {
      if (!this.poseImage && !this.shoeImage) {
        uni.showToast({
          title: "请至少上传一张图片",
          icon: "none",
        });
        return;
      }

      // 显示加载中
      uni.showLoading({
        title: "正在生成中...",
      });

      // 调试日志：显示当前选择的配饰
      console.log("当前选择的配饰:", this.selectedAccessory);

      // 准备上传图片
      const uploadTasks = [];

      if (this.poseImage) {
        uploadTasks.push(runningHubService.uploadImage(this.poseImage));
      }

      if (this.shoeImage) {
        uploadTasks.push(runningHubService.uploadImage(this.shoeImage));
      }

      // 等待所有图片上传完成
      Promise.all(uploadTasks)
        .then((uploadResults) => {
          console.log("图片上传成功:", uploadResults);

          // 构建nodeInfoList
          const nodeInfoList = [];

          if (this.poseImage && uploadResults[0]) {
            nodeInfoList.push({
              nodeId: this.poseBatchPoints.nodeId,
              fieldName: this.poseBatchPoints.fieldName,
              fieldValue: uploadResults[0].fileName,
            });
            this.workflow[59].inputs.image = uploadResults[0].fileName;
          }

          if (this.shoeImage && uploadResults[this.poseImage ? 1 : 0]) {
            nodeInfoList.push({
              nodeId: this.shoeBatchPoints.nodeId,
              fieldName: this.shoeBatchPoints.fieldName,
              fieldValue: uploadResults[this.poseImage ? 1 : 0].fileName,
            });
            this.workflow[50].inputs.image =
              uploadResults[this.poseImage ? 1 : 0].fileName;
          }

          // 重置所有配饰选项，只设置用户当前选择的配饰
          if (this.workflow[177] && this.workflow[177].inputs) {
            // 首先确保模型参数正确设置
            this.workflow[177].inputs.model = "segformer_b3_fashion";

            // 直接设置用户选择的配饰
            // 1. 重置所有可能的配饰选项为false
            this.workflow[177].inputs.applique = false;
            this.workflow[177].inputs.bagwallet = false;
            this.workflow[177].inputs.bead = false;
            this.workflow[177].inputs.belt = false;
            this.workflow[177].inputs.bow = false;
            this.workflow[177].inputs.buckle = false;
            this.workflow[177].inputs.cape = false;
            this.workflow[177].inputs.cardigan = false;
            this.workflow[177].inputs.coat = false;
            this.workflow[177].inputs.collar = false;
            this.workflow[177].inputs.dress = false;
            this.workflow[177].inputs.epaulette = false;
            this.workflow[177].inputs.flower = false;
            this.workflow[177].inputs.fringe = false;
            this.workflow[177].inputs.glasses = false;
            this.workflow[177].inputs.glove = false;
            this.workflow[177].inputs.hairaccessory = false;
            this.workflow[177].inputs.hat = false;
            this.workflow[177].inputs.hood = false;
            this.workflow[177].inputs.jacket = false;
            this.workflow[177].inputs.jumpsuit = false;
            this.workflow[177].inputs.lapel = false;
            this.workflow[177].inputs.legwarmer = false;
            this.workflow[177].inputs.neckline = false;
            this.workflow[177].inputs.pants = false;
            this.workflow[177].inputs.pocket = false;
            this.workflow[177].inputs.ribbon = false;
            this.workflow[177].inputs.rivet = false;
            this.workflow[177].inputs.ruffle = false;
            this.workflow[177].inputs.scarf = false;
            this.workflow[177].inputs.sequin = false;
            this.workflow[177].inputs.shirt = false;
            this.workflow[177].inputs.shoe = false;
            this.workflow[177].inputs.shorts = false;
            this.workflow[177].inputs.skirt = false;
            this.workflow[177].inputs.sleeve = false;
            this.workflow[177].inputs.sock = false;
            this.workflow[177].inputs.sweater = false;
            this.workflow[177].inputs.tassel = false;
            this.workflow[177].inputs.tie = false;
            this.workflow[177].inputs.tights = false;
            this.workflow[177].inputs.top = false;
            this.workflow[177].inputs.umbrella = false;
            this.workflow[177].inputs.vest = false;
            this.workflow[177].inputs.watch = false;
            this.workflow[177].inputs.zipper = false;

            // 2. 如果用户选择了配饰（不是none），则设置为true
            if (this.selectedAccessory && this.selectedAccessory !== "none") {
              console.log(`设置配饰 ${this.selectedAccessory} = true`);
              this.workflow[177].inputs[this.selectedAccessory] = true;
            }
          }

          // 添加必要的nodeInfo
          // 1. 添加模型参数
          nodeInfoList.push({
            nodeId: 177,
            fieldName: "model",
            fieldValue: "segformer_b3_fashion",
          });

          // 2. 如果选择了配饰，添加配饰参数
          if (this.selectedAccessory && this.selectedAccessory !== "none") {
            nodeInfoList.push({
              nodeId: 177,
              fieldName: this.selectedAccessory,
              fieldValue: true,
            });
          }

          // 记录完整的请求数据用于调试
          console.log("创建任务的节点信息:", nodeInfoList);
          console.log("选择的配饰:", this.selectedAccessory);
          console.log(
            "节点177的inputs:",
            JSON.stringify(this.workflow[177].inputs)
          );

          // 调用工作流创建任务
          return runningHubService.createComfyUITask(
            this.workflowId,
            nodeInfoList,
            JSON.stringify(this.workflow)
          );
        })
        .then((taskResult) => {
          uni.hideLoading();
          console.log("任务创建成功:", taskResult);
          this.taskId = taskResult.data.taskId;

          // 添加任务到历史记录
          this.addTaskToHistory(this.taskId);

          // 定时查询任务状态
          this.startStatusCheck();

          // 启动进度条动画
          this.startProgressAnimation();

          // 打开侧边任务列表抽屉
          this.openDrawer();
        })
        .catch((error) => {
          console.error("处理失败:", error);
          uni.hideLoading();
          uni.showToast({
            title: "生成失败，请重试",
            icon: "none",
          });
        });
    },

    // 启动进度条动画
    startProgressAnimation() {
      // 逐渐增加进度条宽度，模拟进度
      this.progressWidth = "20%";

      setTimeout(() => {
        this.progressWidth = "40%";
      }, 3000);

      setTimeout(() => {
        this.progressWidth = "60%";
      }, 8000);

      setTimeout(() => {
        this.progressWidth = "80%";
      }, 15000);
    },

    // 开始查询任务状态
    startStatusCheck() {
      if (!this.taskId) return;

      // 清除可能存在的定时器
      if (this.statusTimer) {
        clearInterval(this.statusTimer);
      }

      const checkInterval = 3000; // 每3秒检查一次
      const maxCheckTimes = 240; // 最多检查60次（3分钟）
      let checkCount = 0;

      // 更新任务状态为处理中
      this.updateTaskStatus(this.taskId, "PROCESSING");

      this.statusTimer = setInterval(() => {
        checkCount++;

        if (checkCount > maxCheckTimes) {
          clearInterval(this.statusTimer);
          this.statusTimer = null;
          uni.hideLoading();
          uni.showToast({
            title: "生成超时，请重试",
            icon: "none",
          });

          // 更新任务状态为失败
          this.updateTaskStatus(this.taskId, "FAILED");
          return;
        }

        runningHubService
          .queryTaskStatus(this.taskId)
          .then((res) => {
            console.log("任务状态:", res);
            const status = res.data;

            // 任务完成
            if (status === "SUCCESS") {
              clearInterval(this.statusTimer);
              this.statusTimer = null;

              // 清除任务计时器
              const taskIndex = this.taskHistory.findIndex(task => task.id === this.taskId);
              if (taskIndex !== -1 && this.taskHistory[taskIndex].durationTimer) {
                clearInterval(this.taskHistory[taskIndex].durationTimer);
                this.taskHistory[taskIndex].durationTimer = null;
              }

              // 更新任务状态为成功
              this.updateTaskStatus(this.taskId, "SUCCESS");

              // 查询任务结果
              this.fetchTaskResult();
            }
            // 任务失败
            else if (status === "FAILED") {
              clearInterval(this.statusTimer);
              this.statusTimer = null;
              uni.hideLoading();
              uni.showToast({
                title: "生成失败，请重试",
                icon: "none",
              });

              // 清除任务计时器
              const taskIndex = this.taskHistory.findIndex(task => task.id === this.taskId);
              if (taskIndex !== -1 && this.taskHistory[taskIndex].durationTimer) {
                clearInterval(this.taskHistory[taskIndex].durationTimer);
                this.taskHistory[taskIndex].durationTimer = null;
              }

              // 更新任务状态为失败
              this.updateTaskStatus(this.taskId, "FAILED");
            }
            // 其他状态继续等待
          })
          .catch((error) => {
            console.error("查询状态失败:", error);
          });
      }, checkInterval);
    },

    // 获取任务结果
    fetchTaskResult() {
      if (!this.taskId) return;

      runningHubService
        .getTaskResult(this.taskId)
        .then((res) => {
          
          console.log("任务结果:", res);

          if (res.data && res.data.length > 0) {
            // 获取结果图片URL
            const resultImageUrl = res.data[0].fileUrl;
            const finalImageUrl = resultImageUrl;
            // 更新任务的结果图片
            const taskIndex = this.taskHistory.findIndex(
              (task) => task.id === this.taskId
            );
            if (taskIndex !== -1) {
              this.taskHistory[taskIndex].resultImage = finalImageUrl;
              this.saveTaskHistory();
            }

            uni.showToast({
              title: "生成成功",
              icon: "success",
            });
          } else {
            uni.showToast({
              title: "获取结果失败",
              icon: "none",
            });
          }
        })
        .catch((error) => {
          uni.hideLoading();
          console.error("获取结果失败:", error);
          uni.showToast({
            title: "获取结果失败",
            icon: "none",
          });
        });
    },

    // 重新生成
    regenerateImage() {
      this.handleRun();
    },

    // 下载
    downloadImage(imageUrl) {
      if (!imageUrl) return;

      uni.showToast({
        title: "开始下载",
        icon: "none",
      });

      // 下载图片到本地临时文件
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            // 保存到相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: "保存成功",
                  icon: "success",
                });
              },
              fail: () => {
                uni.showToast({
                  title: "保存失败",
                  icon: "none",
                });
              },
            });
          } else {
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });
    },

    // 预览
    previewImage() {
      if (!this.resultImage) return;

      uni.previewImage({
        urls: [this.resultImage],
        current: this.resultImage,
      });
    },

    // 分享
    shareImage() {
      if (!this.resultImage) return;

      uni.showShareMenu({
        withShareTicket: true,
        success: () => {
          uni.showToast({
            title: "分享成功",
            icon: "success",
          });
        },
        fail: () => {
          uni.showToast({
            title: "分享失败",
            icon: "none",
          });
        },
      });
    },

    // 切换高级参数
    toggleAdvanced() {
      this.showAdvanced = !this.showAdvanced;
    },

    // 选择背景
    selectBackground(index) {
      this.selectedBackground = index;
    },

    // 选择样式
    selectStyle(index) {
      this.selectedStyle = index;
    },

    // 显示API帮助
    showApiHelp() {
      // 实现显示API帮助的逻辑
    },

    // 掩码API Key
    maskApiKey(key) {
      // 实现掩码API Key的逻辑
    },

    // 获取任务状态文本
    getStatusText(status) {
      switch (status) {
        case "PENDING":
          return "等待中";
        case "PROCESSING":
          return "进行中";
        case "SUCCESS":
          return "完成";
        case "FAILED":
          return "失败";
        default:
          return "未知状态";
      }
    },

    // 查看任务结果
    viewTaskResult(task) {
      if (task.resultImage) {
        this.previewImageUrl = task.resultImage;
        this.previewVisible = true;
      }
    },

    // 关闭预览
    closePreview() {
      this.previewVisible = false;
      this.previewImageUrl = "";
    },

    // 清空任务历史
    clearTaskHistory() {
      uni.showModal({
        title: "确认清空",
        content: "确定要清空所有任务历史记录吗？",
        confirmColor: "#FF3B30",
        success: (res) => {
          if (res.confirm) {
            this.taskHistory = [];
            this.saveTaskHistory();
            uni.showToast({
              title: "历史记录已清空",
              icon: "success",
            });
          }
        },
      });
    },

    // 打开侧边任务列表抽屉
    openDrawer() {
      this.isDrawerOpen = true;
    },

    // 关闭侧边任务列表抽屉
    closeDrawer() {
      this.isDrawerOpen = false;
    },

    formatTaskDuration(task) {
      const duration = task.duration.split(':');
      const hours = parseInt(duration[0], 10);
      const minutes = parseInt(duration[1], 10);
      const seconds = parseInt(duration[2], 10);
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },

    formatTaskDuration(task) {
      if (!task.elapsedTime) return '00:00:00';
      
      // 计算时分秒
      const totalSeconds = Math.floor(task.elapsedTime / 1000);
      const hours = Math.floor(totalSeconds / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;
      
      // 格式化为 HH:MM:SS
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },

    formatStartTime(date) {
      const now = new Date();
      
      // 将日期重置到当天的零点，用于比较天数
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      
      // 计算相差的天数
      const diffTime = today.getTime() - targetDate.getTime();
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
      
      // 格式化时间部分 HH:mm:ss
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      const timeStr = `${hours}:${minutes}:${seconds}`;
      
      if (diffDays === 0) {
        return `今天 ${timeStr}`;
      } else if (diffDays === 1) {
        return `昨天 ${timeStr}`;
      } else if (diffDays === 2) {
        return `前天 ${timeStr}`;
      } else {
        // 格式化为 yyyy/MM/dd HH:mm:ss
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        return `${year}/${month}/${day} ${timeStr}`;
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f0f8f5;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.outfit-container {
  min-height: 100vh;
  padding-bottom: 120rpx;
  position: relative;
}

.main-content {
  padding: 30rpx;
}

.main-title {
  font-size: 44rpx;
  font-weight: 700;
  color: #2c5c4e;
  margin-bottom: 16rpx;
  position: relative;
  display: inline-block;
}

.subtitle {
  font-size: 28rpx;
  color: #5a8a7a;
  margin-bottom: 40rpx;
  line-height: 1.4;
}

/* 容器样式 */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(135deg, #f0f8f5 0%, #e1f1ec 100%);
}

/* 顶部导航区域 */
.header {
  padding: 60rpx 40rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #eeeeee;
}

.app-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.action-item {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #666666;
}

/* 内容区域 */
.content-container {
  flex: 1;
  padding: 30rpx 30rpx 150rpx;
  background-color: transparent;
}

.tabs-container {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 12rpx 12rpx 0 0;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(33, 171, 134, 0.08);
}

.tab {
  flex: 1;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #5a8a7a;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab.active {
  color: #2c5c4e;
  font-weight: 600;
  background: linear-gradient(
    135deg,
    rgba(33, 171, 134, 0.08) 0%,
    rgba(24, 158, 122, 0.05) 100%
  );
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 25%;
  width: 50%;
  height: 3rpx;
  background: linear-gradient(90deg, #21ab86, #189e7a);
  border-radius: 3rpx;
}

.tab-badge {
  font-size: 22rpx;
  background: #21ab86;
  color: white;
  height: 34rpx;
  min-width: 34rpx;
  border-radius: 17rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8rpx;
  padding: 0 6rpx;
  box-sizing: border-box;
}

.main-title-container {
  margin-bottom: 40rpx;
  padding: 30rpx;
  padding-left: 100rpx; /* Add left padding to accommodate the task list button */
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative; /* Add this to position the task list button */
}

.main-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6rpx;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
}

.subtitle {
  font-size: 26rpx;
  color: #5a8a7a;
  margin-bottom: 20rpx;
  display: block;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 24rpx;
}

.tag {
  font-size: 24rpx;
  color: #5a8a7a;
  padding: 10rpx 24rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(240, 250, 245, 0.9) 100%
  );
  border-radius: 30rpx;
  margin-right: 16rpx;
  margin-bottom: 10rpx;
  box-shadow: 0 2rpx 8rpx rgba(33, 171, 134, 0.08);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.tag-icon {
  margin-right: 8rpx;
  font-size: 22rpx;
}

.progress-container {
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
}

.steps-count {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-right: 20rpx;
  min-width: 60rpx;
}

.progress-bar {
  flex: 1;
  height: 10rpx;
  background-color: #f0f0f0;
  border-radius: 5rpx;
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  background-color: #333333;
  border-radius: 5rpx;
}

.upload-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.upload-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.upload-title text {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.help-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
}

.upload-column {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
  margin-bottom: 40rpx;
  align-items: center;
  width: 100%;
}

.upload-row {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  width: 100%;
  max-width: 700rpx;
}

.upload-row .upload-card {
  flex: 1;
  width: 48%;
  max-width: 340rpx;
}

.upload-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 20rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 380rpx;
}

.upload-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 3rpx;
  background: linear-gradient(90deg, transparent, rgba(33, 171, 134, 0.3));
}

.upload-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3rpx;
  background: linear-gradient(90deg, rgba(33, 171, 134, 0.3), transparent);
}

.card-label {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  text-align: center;
  color: #2c5c4e;
  position: relative;
  display: inline-block;
}

.card-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6rpx;
  width: 40rpx;
  height: 2rpx;
  background: linear-gradient(90deg, #21ab86, #189e7a);
  transform: translateX(-50%);
}

.upload-text {
  font-size: 26rpx;
  color: #2c5c4e;
  font-weight: 500;
  margin-bottom: 8rpx;
  text-align: center;
}

.upload-desc {
  font-size: 22rpx;
  color: #5a8a7a;
  text-align: center;
}

.upload-area {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border: 2rpx dashed #b8dbd2;
  border-radius: 16rpx;
  height: 280rpx;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: inset 0 2rpx 8rpx rgba(33, 171, 134, 0.05);
}

.upload-area.has-image {
  border-style: solid;
  border-color: #b8dbd2;
  box-shadow: 0 4rpx 16rpx rgba(33, 171, 134, 0.1);
}

.upload-area:not(.has-image)::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 6s infinite;
  opacity: 0.4;
}

.upload-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.1);
  position: relative;
  overflow: hidden;
}

.upload-icon::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.icon-plus {
  font-size: 46rpx;
  color: #21ab86;
  font-weight: 300;
}

.preview-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.upload-area:active .image-overlay {
  opacity: 1;
}

.edit-button {
  background-color: #ffffff;
  color: #333333;
  padding: 12rpx 36rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.delete-button {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.delete-icon {
  color: #333333;
  font-size: 34rpx;
  line-height: 1;
}

.parameter-container {
  margin-bottom: 30rpx;
}

.parameter-row {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.parameter-header {
  padding: 24rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.parameter-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
}

.toggle-icon {
  font-size: 24rpx;
  color: #5a8a7a;
}

.advanced-options {
  padding: 20rpx 0;
}

.option-group {
  margin-bottom: 24rpx;
}

.option-title {
  font-size: 26rpx;
  color: #5a8a7a;
  margin-bottom: 16rpx;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.option-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 16rpx 0;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.option-item.selected {
  background-color: rgba(33, 171, 134, 0.1);
}

.color-preview {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  border: 1px solid #eeeeee;
  margin-bottom: 10rpx;
}

.style-icon {
  font-size: 36rpx;
  margin-bottom: 10rpx;
  color: #5a8a7a;
}

.option-name {
  font-size: 22rpx;
  color: #5a8a7a;
}

.tips-container {
  background: linear-gradient(
    135deg,
    rgba(240, 248, 245, 0.8) 0%,
    rgba(230, 244, 238, 0.8) 100%
  );
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.08);
  margin-top: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  position: relative;
  overflow: hidden;
  max-width: 700rpx;
  width: 100%;
}

.tips-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2321ab86' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  position: relative;
  z-index: 1;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.tip-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8f5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #5a8a7a;
  margin-right: 16rpx;
  margin-top: 2rpx;
  box-shadow: 0 2rpx 6rpx rgba(33, 171, 134, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.tip-text {
  flex: 1;
  font-size: 24rpx;
  color: #5a8a7a;
  line-height: 1.5;
}

/* 底部操作区域 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(33, 171, 134, 0.1);
  z-index: 100;
}

.action-group {
  display: flex;
  gap: 20rpx;
}

.action-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8f5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.action-icon {
  font-size: 32rpx;
  color: #5a8a7a;
}

.run-button {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 16rpx rgba(33, 171, 134, 0.2);
  transition: all 0.3s ease;
  margin-left: 20rpx;
}

.run-button.button-active {
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  box-shadow: 0 8rpx 20rpx rgba(33, 171, 134, 0.3);
}

.upload-area,
.parameter-row,
.run-button {
  animation: fadeIn 0.6s ease;
}

/* 添加一个微妙的点击效果 */
.upload-card:active,
.run-button:active:not([disabled]),
.option-item:active {
  transform: scale(0.98);
  transition: transform 0.2s ease;
}

/* 结果展示区域 */
.result-section {
  margin: 30rpx 30rpx 120rpx;
  padding: 30rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 250, 245, 0.95) 100%
  );
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(33, 171, 134, 0.12);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: slideUp 0.5s ease;
  position: relative;
  overflow: hidden;
}

.result-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rpx;
  background: linear-gradient(
    90deg,
    transparent,
    #21ab86,
    #189e7a,
    transparent
  );
  z-index: 1;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.result-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.result-actions {
  display: flex;
  gap: 20rpx;
}

.action-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  background: linear-gradient(
    135deg,
    rgba(33, 171, 134, 0.1) 0%,
    rgba(24, 158, 122, 0.1) 100%
  );
  margin-left: 16rpx;
}

.action-button-text {
  font-size: 24rpx;
  color: #21ab86;
  margin-left: 8rpx;
}

.result-preview {
  width: 100%;
  height: 500rpx;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  margin: 20rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6f4ee;
}

.result-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.result-preview:active .result-image {
  transform: scale(1.02);
}

.result-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.result-preview:active .result-overlay {
  opacity: 1;
}

.zoom-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(240, 248, 245, 0.9) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.tech-zoom-icon {
  position: relative;
  width: 26rpx;
  height: 26rpx;
  border: 2rpx solid #21ab86;
  border-radius: 50%;
}

.tech-zoom-icon::before {
  content: "";
  position: absolute;
  right: -8rpx;
  bottom: -2rpx;
  width: 10rpx;
  height: 2rpx;
  background: #21ab86;
  transform: rotate(45deg);
  transform-origin: right center;
}

.tech-zoom-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  background: rgba(33, 171, 134, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-small 2s infinite;
}

@keyframes pulse-small {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.2;
  }
}

.result-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(217, 225, 255, 0.5);
  padding-top: 20rpx;
}

.result-info {
  font-size: 24rpx;
  color: #5a8a7a;
}

.share-button {
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.share-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}

.share-button:active {
  transform: scale(0.95);
}

.share-icon-container {
  margin-right: 10rpx;
  width: 32rpx;
  height: 32rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tech-share-icon {
  position: relative;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background: #ffffff;
}

.tech-share-icon::before,
.tech-share-icon::after {
  content: "";
  position: absolute;
  width: 16rpx;
  height: 2rpx;
  background: #ffffff;
}

.tech-share-icon::before {
  top: -6rpx;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

.tech-share-icon::after {
  bottom: -6rpx;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.share-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

/* 通用动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(405deg);
  }
}

@keyframes download {
  0% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
  50% {
    transform: translateX(-50%) translateY(2rpx) rotate(45deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(45deg);
  }
}

.api-settings {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(240, 248, 245, 0.9) 100%
  );
  border-radius: 16rpx;
  padding: 16rpx 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  z-index: 10;
}

.api-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
  font-size: 24rpx;
  color: #2c5c4e;
  font-weight: 600;
}

.api-help {
  width: 32rpx;
  height: 32rpx;
  border-radius: 16rpx;
  background: #21ab86;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  margin-left: 10rpx;
}

.api-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-key-info {
  font-family: monospace;
  color: #21ab86;
}

.progress-indicator {
  height: 4rpx;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 248, 245, 0.95) 100%
  );
  padding: 40rpx 60rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(33, 171, 134, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #5a8a7a;
  font-weight: 500;
}

.loading-detail {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #5a8a7a;
  opacity: 0.8;
}

.slider-container {
  width: 100%;
  padding: 0 16rpx;
  margin: 20rpx 0;
}

.slider {
  width: 100%;
  height: 4rpx;
  background-color: #e1f1ec;
  position: relative;
  border-radius: 2rpx;
}

.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
}

.slider-handle {
  position: absolute;
  top: 50%;
  width: 24rpx;
  height: 24rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  border: 3rpx solid #21ab86;
  transform: translate(-50%, -50%);
  box-shadow: 0 2rpx 6rpx rgba(33, 171, 134, 0.2);
}

.radio-container {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.radio {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  border: 2rpx solid #5a8a7a;
  margin-right: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio.active {
  border-color: #21ab86;
}

.radio.active::after {
  content: "";
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background-color: #21ab86;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  border: 2rpx solid #5a8a7a;
  margin-right: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox.active {
  border-color: #21ab86;
  background-color: #21ab86;
}

.checkbox.active::after {
  content: "";
  width: 20rpx;
  height: 10rpx;
  border-left: 3rpx solid #ffffff;
  border-bottom: 3rpx solid #ffffff;
  transform: rotate(-45deg) translate(2rpx, -2rpx);
}

.tag {
  padding: 6rpx 16rpx;
  background-color: rgba(33, 171, 134, 0.08);
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #5a8a7a;
  margin-right: 10rpx;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.tag.active {
  background-color: rgba(33, 171, 134, 0.15);
  color: #21ab86;
}

/* Upload progress */
.upload-progress {
  width: 100%;
  height: 6rpx;
  background-color: #e1f1ec;
  border-radius: 3rpx;
  margin: 10rpx 0;
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 3rpx;
  transition: width 0.3s ease;
}

.text-link {
  color: #21ab86;
  text-decoration: underline;
  font-weight: 500;
}

.upload-preview.with-image {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
}

.preview-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2c5c4e;
  margin-bottom: 6rpx;
}

.preview-action-btn {
  padding: 8rpx 20rpx;
  background: linear-gradient(90deg, #21ab86, #189e7a);
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 600;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(33, 171, 134, 0.2);
}

.image-placeholder {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border: 2rpx dashed #b8dbd2;
  border-radius: 12rpx;
  height: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.placeholder-border {
  margin-top: 30rpx;
  width: 70%;
  height: 2rpx;
  background: linear-gradient(to right, transparent, #b8dbd2, transparent);
  border-radius: 1rpx;
}

.placeholder-bg {
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-top: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.placeholder-icon {
  font-size: 36rpx;
  color: #21ab86;
  margin-bottom: 10rpx;
}

.placeholder-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c5c4e;
  margin-bottom: 6rpx;
}

/* 任务列表区域 */
.task-list-section {
  margin: 30rpx 0 40rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 20rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.section-actions {
  display: flex;
  gap: 10rpx;
}

.action-button.small {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  background: rgba(33, 171, 134, 0.1);
}

.task-list-container {
  max-height: 400rpx;
}

.task-item {
  padding: 20rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.08);
}

.task-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6rpx;
  height: 100%;
  background: #b8dbd2;
}

.task-item.task-active::after {
  background: #21ab86;
  animation: pulse 2s infinite;
}

.task-item.task-completed::after {
  background: #21ab86;
}

.task-item.task-failed::after {
  background: #e57373;
}

.task-info {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.task-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.task-status {
  font-size: 24rpx;
  color: #5a8a7a;
  padding: 2rpx 12rpx;
  background: rgba(33, 171, 134, 0.1);
  border-radius: 20rpx;
}

.task-item.task-failed .task-status {
  color: #e57373;
  background: rgba(229, 115, 115, 0.1);
}

.task-details {
  display: flex;
  justify-content: space-between;
}

.task-time,
.task-duration {
  font-size: 22rpx;
  color: #5a8a7a;
}

.task-actions {
  display: flex;
  gap: 10rpx;
  margin-top: 12rpx;
  justify-content: flex-end;
}

.task-action-btn {
  padding: 6rpx 16rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  border-radius: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(33, 171, 134, 0.2);
}

.task-action-text {
  font-size: 22rpx;
  color: #ffffff;
}

.task-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: rgba(33, 171, 134, 0.1);
}

.task-progress .progress-bar {
  width: 100%;
  height: 100%;
  background: transparent;
}

.task-progress .progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  transition: width 0.5s ease;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* 空任务提示 */
.empty-task-container {
  margin: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 20rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.empty-task-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  opacity: 0.7;
}

.empty-task-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #2c5c4e;
  margin-bottom: 16rpx;
}

.empty-task-tip {
  font-size: 26rpx;
  color: #5a8a7a;
  margin-bottom: 30rpx;
  text-align: center;
}

.empty-task-action {
  padding: 16rpx 40rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.2);
}

.empty-task-action-text {
  font-size: 26rpx;
  color: #ffffff;
  font-weight: 600;
}

/* 侧边任务列表抽屉 */
.task-drawer {
  position: fixed;
  top: 0;
  right: 0; /* Changed from left: 0 to right: 0 */
  width: 75%;
  height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  box-shadow: -2rpx 0 20rpx rgba(33, 171, 134, 0.15); /* Changed shadow direction */
  z-index: 1000;
  transform: translateX(
    100%
  ); /* Changed from translateX(-100%) to slide from right */
  transition: transform 0.3s ease;
}

.drawer-open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 24rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
}

.drawer-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.drawer-close {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #21ab86;
  box-shadow: 0 2rpx 8rpx rgba(33, 171, 134, 0.1);
}

.drawer-content {
  padding: 24rpx;
  height: calc(100% - 110rpx);
}

.drawer-actions {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  border-top: 1px solid rgba(33, 171, 134, 0.1);
}

.drawer-action-btn {
  padding: 12rpx 30rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.2);
}

.drawer-action-text {
  font-size: 26rpx;
  color: #ffffff;
  font-weight: 500;
}

.drawer-empty {
  margin: 60rpx 24rpx;
  padding: 40rpx;
}

.drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* 任务列表按钮 */
.task-list-button {
  position: fixed; /* Changed from absolute to fixed */
  top: 50%; /* Position in the middle of the screen vertically */
  right: 0; /* Changed from left: 30rpx to right: 0 */
  transform: translateY(-50%); /* Center vertically */
  display: flex;
  flex-direction: column; /* Changed from horizontal to vertical layout */
  align-items: center;
  justify-content: center;
  padding: 20rpx 12rpx; /* Adjusted padding for vertical layout */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 248, 245, 0.95) 100%
  );
  border-radius: 16rpx 0 0 16rpx; /* Rounded corners only on the left side */
  box-shadow: -4rpx 0 12rpx rgba(33, 171, 134, 0.1); /* Shadow on the left side */
  border: 1px solid rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.task-list-button:active {
  transform: translateY(-50%) scale(0.95); /* Keep vertical centering when scaling */
  transition: transform 0.2s ease;
}

.task-list-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24rpx;
  height: 16rpx;
  margin-right: 0; /* Remove right margin */
  margin-bottom: 12rpx; /* Add bottom margin instead */
}

.task-list-line {
  width: 100%;
  height: 2rpx;
  background: #21ab86;
  border-radius: 2rpx;
}

.task-list-text {
  font-size: 22rpx;
  color: #2c5c4e;
  font-weight: 600;
  writing-mode: vertical-lr; /* Vertical text orientation */
  text-orientation: upright; /* Characters remain upright */
  letter-spacing: 2rpx; /* Add space between characters */
}

.task-list-badge {
  font-size: 20rpx;
  background: #21ab86;
  color: #ffffff;
  height: 30rpx;
  min-width: 30rpx;
  padding: 0 6rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0; /* Remove left margin */
  margin-top: 8rpx; /* Add top margin instead */
  box-shadow: 0 2rpx 4rpx rgba(33, 171, 134, 0.2);
}

.task-result-preview {
  margin-top: 12rpx;
  width: 100%;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}

.task-result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-result-preview:active {
  opacity: 0.8;
}

/* 全屏图片预览 */
.fullscreen-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-image {
  max-width: 100%;
  max-height: 100%;
}

.preview-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
}

.upload-row {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
  width: 100%;
}

.upload-row .upload-card {
  flex: 1;
  width: 48%;
}
</style>
